<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 头部组件 -->
        <tree-tools :tree-node="company" is-root @addbm="addbm" />
        <!-- <hr> -->
        <!-- 组织架构的树形组件 -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- 作用域插槽 -->
          <template #default="{ data }">
            <!-- delDepts是子元素的自定义事件，然后触发这个事件的时候重新获取一次页面 -->
            <tree-tools
              :tree-node="data"
              @delDepts="getDepartments"
              @addbm="addbm"
              @edit="edit"
            />
          </template>
        </el-tree>
        <!-- 弹窗用来新增部门 -->
        <AddDept
          ref="addDept"
          :show-dialog.sync="isok"
          :tree-node="node"
          @addDept="getDepartments"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
// 1. 引入组件
import TreeTools from './components/tree-tools.vue'
// 新增部门组件
import AddDept from './components/add-dept.vue'
// 2. 引入接口
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
export default {
  // 注册组件
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      // company: {},
      // 1. 树形组件的数据数组
      // departs: [
      //   {
      //     name: '总裁办',
      //     manager: '曹孟德',
      //     children: [{ name: '董事会', manager: '曹丕' }]
      //   },
      //   { name: '行政部', manager: '刘备' },
      //   { name: '人事部', manager: '孙权' }
      // ],
      isok: false, // 用来控制弹出层的开启与关闭
      node: {}, // 这是来存放添加子部门的父部门
      departs: [], // 用来树形图的渲染数据
      // 2. 公司的信息对象
      company: {}, // 这是标题数据，部门标题
      defaultProps: { // 这个是树形图默认渲染数的名称
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 1. 获取组织架构数据
    async getDepartments() {
      // 1.1 请求接口
      const { companyName, depts } = await getDepartments()
      // 1.2 数据赋值
      // console.log(depts)
      this.company = { name: companyName, manager: '负责人', id: '' }
      this.departs = tranListToTreeData(depts, '')
    },
    addbm(node) {
      // 控制有弹窗
      this.isok = true // 弹窗开启
      this.node = node // 存放点击的部门数据
    },
    // 编辑部门操作
    async edit(node) {
      // 控制有弹窗
      this.isok = true // 弹窗开启
      this.node = node // 存放点击的部门数据
      // 直接调用子组件中的方法 传入一个id
      await this.$refs.addDept.getDepartDetail(node.id)
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  40px;
  font-size:16px;
}
</style>
